<template>
<div class="music-vi">
<van-image width="50" height="50" round :src="mp3Info.picUrl"/>
  <h2>{{mp3Info.name}}</h2>
  <div class="musics" >
  <!--isBote 布尔值判断是否播放还是暂停图标 true为播放反之 -->
  <van-icon v-if="isBote" name="pause-circle" class="nic" size="13" @click.self="dos">
      <audio
      autoplay
      ref="dosic"
      :src="urls"
      source />
   </van-icon>
    <!-- ico播放" /> -->
   <van-icon  v-else  name="play" @click.self="url" size="13" class="nic">
      <audio
      autoplay
      ref="music"
      :src="urls"
      source />
   </van-icon>
   <van-icon name="bars" size="16" class="nocs" @click="url" ref="name" />
  </div>
  </div>
</template>
<script>
import Vue from 'vue'
import { mapState } from 'vuex'
import { Image as VanImage, Icon } from 'vant'
Vue.use(Icon)
Vue.use(VanImage)
export default {
  data () {
    return {
      src: '',
      isBote: true,
      audio: document.getElementById('music')
    }
  },
  create () {
    // 进入创建实例页面判断isbote布尔值状态决定是播放还是暂停状态dosic
    // console.log(this.$refs.dosic)
  },
  mounted () {
    this.src = localStorage.getItem('picUrl')
  },
  computed: {
    ...mapState({
      urls: ({ mp3 }) => mp3.musicIdUrl,
      // mp3Info: ({ mp3 }) => mp3.mp3Info
      mp3Info: (state) => state.mp3.mp3Info
    })
  },
  methods: {
    url () {
      console.log(1)
      this.$refs.music.play()
      this.isBote = true
    },
    dos () {
      this.$refs.dosic.pause()
      this.isBote = false
    }
  }
}
</script>
<style lang="scss" scoped>
.van-image{
  margin-left: 0.13rem;
}
 html,body{
    // backgrounrgb(151, 145, 145)red;
    .music-vi{
      position: fixed;
      width: 95%;
      height: 0.4rem;
      bottom: 0.5rem;
      right: 0.1rem;
      border-top: 0.5px solid rgba(238, 238, 238, 0.39);
      background:#222;
      opacity: 0.9;
      display: flex;
      align-items: center;
      .music-img{
        // 原图
        margin-top:-0.15rem;
        margin-left: 0.1rem;
      }
      h2{
        color: #fff;
        margin-left:0.2rem;
        font-size: 0.13rem;
      }
      .musics{
        position: absolute;
        right: 0.4rem;
        height: 0.2rem;
        width: 0.2rem;
        border: 2px solid #009966;
        border-radius: 50%;
        .nic{
          position: absolute;
          left: -0.02rem;
          top: 0.01rem;
          color: #009966;
        }
        .nocs{
          position: absolute;
          right: -0.28rem;
          color: #009966;
        }
    }
    }
 }
</style>
